Aribnbのデザイン、コーディング勉強
2018年09月29日
Airbnbのサイトデザインの構成についての調査、勉強です。
調査サイト
Airbnb
調査日
2018年10月
全体的なレイアウト
レスポンシブデザイン
トップページ
下にスクロールすることでコンテンツがjsで追加表示されていく。
総コンテンツはかなり多い
ファーストビューに検索ボックスが大きくでる。
大きく印象的な写真(日替わり?)
白地に余白が多め
グローバルメニュー
横並びのメニューで、縮めるとホームメニューがドロップダウンに変化する。
横並びの部分
ul display:table list-style:none
li display:table-cell
floatは使っていない
ある程度横に縮めるとウグローバルナビは左上のアイコンに折りたたまれる
ヘッダは
position: absoluteで画面上表示
折り畳まれたメニューは、クリックするとz-indexと、position:fixedで画面いっぱいに表示される
ページ内のメニュー
メニューの横並び
display:inline-bock
要素は横並びで中はブロック要素
での
width:◯◯%
を使っての横並び。widthは、メディアしていで、max-width,min-widthで横幅を変更している。
(レスポンシブデザインの基本)
その他で気がついた点
多くの画像を、img src で指定せずに、 div styleでbackground-image: で指定している。
理由は不明。
画像が入っているdiv要素にrole=imgをつけているが、アクセシビリティのためにつけてあるものでSEOや機能的な意味はない。
その他にも、 aria-label要素も、その要素の解説のために使われている。
横並び要素の中の横並びは
display:table-cell で実装している?